<template style="">
  <div class="div_background">
    <div class="login-container" >
    <el-card  shadow="hover" style="border: solid lightblue; background: darkgrey;height: 300px;">
        <template slot="header">
          <icon class="fa fa-tripadvisor"></icon>Night Owl Field-系统登录
        </template>
      <el-form>
        <el-form-group >
            <el-form-item label="用户名:"  label-width="80px">
                <el-input   v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
        </el-form-group>

        <el-form-group>
          <el-form-item label="密码:"  label-width="80px">
                <el-input v-model="form.password" placeholder="请输入密码"show-password ></el-input>
          </el-form-item>
        </el-form-group>

        <el-button style="margin-left: 22%;width: 78%" type="success " @click="loginHandle"><i class="fa fa-hand-pointer-o"></i>登录</el-button>

       <div id="other_login"><a href="#"style="text-decoration: none">其它登录方式</a> </div>

      </el-form>
    </el-card>
</div>
</div>
</template>


<script>
    export default {
        name: "Login4",
      data(){
        return{
          form:{
            username:'',
            password:'',
          },errMsg:{
            message:'用户名或者密码错误',
            isShow:false
          }
        }
      },methods:{
          loginHandle(){
            var _this=this;
            this.axios({
              url:'http://localhost:3000/user/login',
              method:'get',
              params:{
                username: this.form.username,
                password: this.form.password
              }
            }).then(function (res) {
                    if (res.data.flag){
                      _this.$router.push('/layout/employee')
                    } else {
                      _this.$message({
                        type:'error',
                        message:'用户忙或者密码错误！'
                      })
                    }
            })
          }
      }
    }

</script>

<style scoped>
  .login-container{
    width: 400px;
    margin-top: 200px;
    margin-left: 600px;
    margin-bottom: 100px;
    height: 400px;

  }
 .el-button{
   width: 95%;
   margin-left: 5%;
 }
.div_background{
  margin: 0 auto;
  background-image: url("../../assets/壁纸14.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  height: 100%;
  width: 100%;
}
template{

}

 #other_login{
   width: 100%;
   text-align: right;
   margin-top: 25px;
   height: 75px;
   font-size: 15px;
 }

 a:link{
  color: black;
}
 a:hover{
   color: pink;
 }

</style>
